<template>
  <div class="event1">
    <h4>ref与$parents的通信</h4>
    <h4>我是子组件的钱：{{ money }}</h4>
    <h5 ref="h5Ref" @click="getDom">ref获取dom</h5>
    <p>我是闺女的钱{{ moneyDother }}</p>
    <el-button @click="getParents($parent)">使用父组件的方法</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let money = ref<Number>(10);
let moneyDother = ref<Number>(10);
let h5Ref = ref();
//暴露出去给父组件使用
defineExpose({
  money
});
/**
 * 通过ref获取dom元素
 */
const getDom = () => {
  console.log("h5Ref", h5Ref.value);
};
/**
 * 在子组件改变父组件的值
 */
const getParents = $parent => {
  console.log("$parent", $parent);
  $parent.money += 10;
  moneyDother.value += 1;
};
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: rgb(121, 242, 118);
}
</style>
